@import "../../../grid";
@import "../../../base/display/set5-template";

.tvo-#{$template-name}-template {
  &.tvo-testimonials-display-single {
    .tvo-testimonial-display-item {
      .tvo-item-grid {
        margin-left: 0;
        margin-right: 0;
      }

      margin-bottom: $grid-item-padding-vertical *2;

      h4 {
        @include transform-uppercase;
        color: $title-color-large;
        font-size: $title-size-large;
        font-weight: $title-weight-large;
        line-height: $title-line-height-large;
        margin-bottom: $title-large-margin-bottom;
        margin-top: 0;
      }
    }

    .tvo-testimonial-image-cover {
      display: inline-block;
      border-radius: $image-border-radius;
      height: $image-size-small;
      margin-right: -50px;
      margin-top: 25px;
      width: $image-size-small;
    }

    .tvo-testimonial-image {
      height: $image-size-small;
      width: $image-size-small;
    }

    .tvo-apply-background {
      height: 100%;
      max-width: 95%;
      transform: skew(-7deg);
      -ms-transform: skew(-7deg);
      -webkit-transform: skew(-7deg);
    }

    .tvo-testimonial-quote {
      @include tvo-relative;
      min-height: 40px;
      margin-bottom: $quote-margin-large;
      padding-left: 90px;

      &:before {
        font-size: $quotes-size-large;
        position: absolute;
        left: 0;
        top: -7px;
      }
    }

    .tvo-testimonial-info {
      font-style: italic;
      padding-left: ($grid-item-padding-side *2);
      padding-top: 10px;
    }

    .tvo-testimonial-content {
      transform: skew(7deg);
      -ms-transform: skew(-7deg);
      -webkit-transform: skew(-7deg);
      padding: $grid-item-padding-large;
    }

    .tvo-testimonial-image-wrapper {
      // min-width: $image-size-small;
    }

    .tvo-testimonial-content-wrapper {
      -webkit-flex: 1;
      flex: 1;
    }

    svg {
      .tvo-testimonial-image {
        height: $image-size*0.5;
        width: $image-size;
      }

      .tvo-testimonial-image-cover {
        @include center-align;
        border-radius: $image-border-radius;
        height: $image-size*0.5;
        width: $image-size;
      }
    }
  }
}

@media screen and (max-width: 940px) {
  .tvo-set5-template {
    .tvo-show-on-mobile {
      display: block;
    }

    .tvo-hide-on-mobile {
      display: none;
    }

    .tvo-item-grid {
      -webkit-flex-direction: column;
      flex-direction: column;
    }

    &.tvo-testimonials-display-single {
      svg {
        @include center-align;
      }

      .tvo-testimonial-content {
        padding: $grid-item-padding-side*0.5;
      }

      .tvo-apply-background {
        max-width: 100%;
        transform: none;
      }

      .tvo-testimonial-content {
        transform: none;
      }

      .tvo-testimonial-quote {
        padding-left: 0;

        &:before {
          display: block;
          font-size: $quotes-size;
          position: static;
        }
      }
    }
  }
  .tvo-set5-template.tvo-testimonials-display-single .tvo-testimonial-image-wrapper img {
    margin: 0 auto;
  }
}


